<template>
  <div class='container'>
    <el-dialog
      title="题目预览"
      :visible="dialogVisible"
      width="900px"
      @close="close">
      <el-row>
        <el-col :span="6"><div class="grid-content bg-purple">【题型】
          <span v-if="questionInfo.questionType==='1'">单选题</span>
          <span v-else-if="questionInfo.questionType==='2'">多选题</span>
          <span v-else-if="questionInfo.questionType==='3'">简答题</span>
          </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light">【编号】
          <span>{{questionInfo.number}}</span>
          </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【难度】
           <span v-if="questionInfo.difficulty==='1'">简单</span>
          <span v-else-if="questionInfo.difficulty==='2'">一般</span>
          <span v-else-if="questionInfo.difficulty==='3'">困难</span>
          </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light">【标签】
          <span>{{questionInfo.tags}}</span>
          </div></el-col>
      </el-row>
        <el-row >
        <el-col :span="6"><div class="grid-content bg-purple">【学科】
          <span>{{questionInfo.subjectName}}</span>
          </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light">【目录】
          <span>{{questionInfo.directoryName}}</span>
          </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【方向】
          <span>{{questionInfo.direction}}</span>
          </div></el-col>
        </el-row>
      <el-divider>
      </el-divider>
      <el-row style="margin-top: 20px;pointer-events: none;">
        <el-col :span="12"><div class="grid-content bg-purple">【题干】
          <div  style="color: blue;" v-html="questionInfo.answer"></div>
          <div><p style="font-size: 14px;color:#c89">选择：(以下选中的选择为正确答案)</p></div>
          <template v-if="questionInfo.questionType==='1'">
             <div class="questionsType">
              <el-radio class="son_"  v-for="item in questionInfo.options"
               v-model="item.isRight"
               :label="1"
              :key="item.id" >{{item.title}}</el-radio>
             </div>
          </template>
          <template v-else-if="questionInfo.questionType==='2'">
              <div class="questionsType">
                 <el-checkbox class="son_" v-for="item in questionInfo.options"
               :checked="item.isRight===1"
                :key="item.id" v-model="item.isRight" >{{item.title}}</el-checkbox>
              </div>
          </template>
          <template v-else-if="questionInfo.questionType==='3'">
            333
          </template>
          </div></el-col>
      </el-row>
      <el-divider>
      </el-divider>
      <el-row style="margin-top: 20px;">
        <el-col :span="12"><div class="grid-content bg-purple">【参考答案】：
          <el-button type="danger" size="mini" @click="showVideo=true">视频答案预览</el-button>
          <video v-if="showVideo" style="margin-top: 20px;" :src="questionInfo.videoURL" controls width="500px"></video>
          </div></el-col>
      </el-row>
      <el-divider>
      </el-divider>
      <el-row style="margin-top: 20px;">
        <el-col :span="12"><div class="grid-content bg-purple">【答案解析】：
          <div v-if="questionInfo.answer" style="color: blue;" v-html="questionInfo.answer"></div>
          </div></el-col>
      </el-row>
       <el-divider>
      </el-divider>
      <el-row style="margin-top: 20px;">
        <el-col :span="12"><div class="grid-content bg-purple">【题目备注】:
          <div><span>{{questionInfo.remarks}}</span></div>
          </div></el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="close">确 定</el-button>
      </span>

    </el-dialog>
  </div>
</template>

<script>
import { detail } from '../../api/hmmm/questions'
export default {
  props: {
    dialogVisible: {
      type: Boolean
    },
    id: {
      type: Number,
      default: null
    }
  },
  data () {
    return {
      questionInfo: {},
      showVideo: false
    }
  },
  created () {
    this.GetQuestionInfo()
  },
  methods: {
    close () {
      this.$emit('update:dialogVisible', false)
    },
    handleClose () {

    },
    // 判断是否选中
    checkis (a) {
      return a === 1
    },
    async GetQuestionInfo () {
      try {
        const data = {
          id: this.id
        }
        const res = await detail(data)
        this.questionInfo = res.data
      // console.log(this.questionInfo)
      } catch (error) {

      }
    }
  }
}
</script>

<style scoped lang='scss'>
.radioList{
  width: 600px;
  display: flex;
  align-items: center; /* 子元素在侧轴方向上居中对齐 */
  // height: 200px;
  // border: 1px solid #ccc;
}
.questionsType{
  display: flex;
  flex-direction: column;
  .son_{
    margin-bottom: 15px;
  }
}
</style>
